/* ==================== 仪表盘整体容器样式 ==================== */

.dashboard-container {
    flex: 1; /* 剩余空间由 dashboard 占据 */
    display: flex; /* 使用 Flex 布局 */
    flex-direction: column; /* 垂直排列子元素 */
    /*height: calc(100% - 100px); !* 减去头部高度 *!*/
    width: 100%; /* 占满整个父容器宽度 */
    overflow: hidden; /* 防止内容溢出页面 */
    /*border: 1px solid red;*/
    margin-bottom: 10px;
}

/* ==================== 行级布局样式 ==================== */

.row {
    /*border: 1px solid red;*/
    display: flex; /* 每一行使用 Flex 布局 */
    justify-content: space-between; /* 子元素左右分布 */
}

/* 第一行（上部区域）占比较大 */
.row-first {
    flex: 7; /* 占比为 7/10 */
}

/* 最后一行（底部区域）占比较小 */
.row-last {
    flex: 3; /* 占比为 3/10 */
}

/* ==================== 各大区块样式（左、中、右） ==================== */

.section {
    flex: 1; /* 默认等分宽度 */
    background-color: rgba(228, 14, 14, 0.0); /* 背景色透明 */
    padding: 5px; /* 内边距 */
    margin: 5px; /* 外边距 */
    text-align: center; /* 文字居中 */
    display: flex;
    flex-direction: column; /* 纵向排列子元素 */
    gap: 10px; /* 子元素之间间距 */
}

/* 中间区域（地图区）需要更大空间 */
.section-center {
    flex: 2; /* 宽度是其他区域的两倍 */
    min-width: 400px; /* 设置最小宽度以防止压缩过度 */
    max-width: 100%; /* 避免超出容器 */
}

/* 左侧与右侧保持等宽 */
.section-left,
.section-right {
    flex: 1; /* 与 section-center 对应 */
}

/* ==================== 每个 section 内部模块样式 ==================== */

.sub-section {
    background-color: rgba(228, 14, 14, 0); /* 子模块背景色透明 */
}

/* 上部子模块比例 */
.sub-section-top {
    flex: 2; /* 占比为 2/5 */
}

/* 下部子模块比例 */
.sub-section-bottom {
    flex: 3; /* 占比为 3/5 */
}

/* ==================== 地图区域样式 ==================== */

.section-map {
    width: 100%; /* 占满父容器宽度 */
    height: 100%; /* 占满父容器高度 */
    border-radius: 8px; /* 圆角效果 */
    display: flex;
    flex-direction: column; /* 纵向排列标题和地图 */
    justify-content: center; /* 垂直居中 */
    align-items: center; /* 水平居中 */
}

/* 地图标题容器 */
.title-map {
    width: 100%;
    padding: 10px;
    box-sizing: border-box; /* padding 不影响总宽度 */
}

/* 地图标题文字样式 */
.title-map-text {
    background: linear-gradient(180deg, rgb(198, 224, 228), rgba(27, 72, 80, 0));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    color: transparent;
    font-family: '优设标题黑', serif; /* 字体设置 */
    font-size: 30px;
    font-weight: 700;
    line-height: 36px;
    text-align: center;
}

/* 地图内容容器 */
.content-map {
    width: 100%; /* 占满父容器宽度 */
    height: 100%; /* 占满父容器高度 */
    box-sizing: border-box;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}
